import streamlit as st

# 初始化会话状态
if 'panels' not in st.session_state:
    st.session_state.panels = []  # 存储所有面板信息的列表，每个元素是一个字典，包含面板ID和名称

# 创建三列布局（这里只用到了右侧列）
_, _, right = st.columns(3)

# 函数：显示单个面板及其删除按钮
def display_panel(panel_id, panel_name):
    with st.expander(f"Point Config {panel_id}"):
        st.title(f"Point Config {panel_id}")
        # 这里可以添加更多的配置选项

        # 删除按钮
        if st.button("Delete",key=panel_id, icon="🗑️"):
            # 从会话状态中移除面板信息
            st.session_state.panels = [p for p in st.session_state.panels if p['id'] != panel_id]
            # 由于Streamlit的页面渲染机制，我们需要重新加载页面或触发某种刷新来更新UI
            # 这里我们使用st.experimental_rerun()来重新运行整个脚本（注意：这是实验性功能，未来可能会更改）
            # 另一种方法是使用回调或事件系统来更新UI，但这通常涉及更复杂的逻辑和状态管理
            # 对于简单应用，重新运行脚本通常足够
            # st.experimental_rerun()  # 注意：这将重新加载整个页面，可能会导致用户体验不佳

# 显示所有面板
for panel in st.session_state.panels:
    panel_id = panel['id']
    panel_name = panel.get('name', f"Untitled Panel {panel_id}")  # 假设面板有一个可选的名称属性，默认为"Untitled Panel"加上ID
    display_panel(panel_id, panel_name)

# 添加新面板的按钮
if st.button("Create New Point", icon="➕"):
    new_panel_id = len(st.session_state.panels) + 1  # 使用列表长度加1作为新面板的ID（确保唯一性）
    st.session_state.panels.append({'id': new_panel_id})  # 将新面板信息添加到会话状态中
    # 注意：这里没有立即显示新面板，因为页面会在下次加载时根据st.session_state.panels渲染所有面板

# 注意：
# 1. 使用st.experimental_rerun()会导致整个页面重新加载，这可能会影响用户体验。
# 2. 对于更复杂的应用，您可能需要实现更精细的状态管理和UI更新逻辑，以避免重新加载整个页面。
# 3. 考虑到Streamlit的页面渲染机制，直接操作DOM或实现复杂的交互模式可能比较困难。
# 4. 您可以考虑使用Streamlit的组件库（如streamlit-components）或自定义组件来创建更复杂的UI元素。